<template>
    <div class="chatBox" @click="bqShow = false" v-if="id">
        <div class="header">
            <div>{{ id }}</div>
            <a-popconfirm :title="'需要将' + id + '用户加入到黑名单吗？'" placement="left" @confirm="addHei(id)">
                <template #icon><question-circle-outlined style="color: red" /></template>
                <a href="#" v-show="id">加入黑名单</a>
            </a-popconfirm>
        </div>
        <div class="contentChat" ref="box" @scroll="scrollHanle">
            <div class="xiaoxi" v-for="(item, index) in store.latestData.value?.messages?.slice().reverse()">
                <div class="dates">{{ datejs(item.time) }}</div>
                <div class="con" :id="item.from != res.id ? 'yes' : ''">
                    <img style="width: 30px;height: 30px;" src="../static/images/theme22x.png" alt="">
                    <div class="neirong">
                        <div class="names">{{ item.from == res.id ? item.from : '客服' }}</div>
                        <div class="neiBox">
                            <template v-if="item.type == 'txt'"> <!-- 文本数据 -->
                                <template v-for="it in textToImg(item.msg)">
                                    <span v-if="it.type == 'text'">{{ it.content }}</span>
                                    <img v-if="it.type == 'img'" :src="it.path">
                                </template>
                            </template> <!-- 图片数据 -->
                            <template v-if="item.type == 'img'">
                                <a-image :width="300" :src="item.url" />
                            </template>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div v-show="bqShow">
                <bq @setbq="upBq"></bq>
            </div>

            <div class="file">
                <meh-outlined style="margin-right: 20px;" @click.stop="bqShow = true" />
                <picture-outlined @click="intImgs.click()" />
                <input type="file" ref="intImgs" style="display: none;" accept="image/*" @change="setImg">
            </div>
            <div class="content">
                <a-input v-model:value="textWb" :bordered="false" placeholder="请输入内容......" />
                <a-button type="primary" class="btns" :disabled="textWb.trim() == '' || store.uid == ''"
                    @click="setFile">发送</a-button>
            </div>
        </div>
    </div>
</template>


<script setup>
import { onUnmounted, defineProps, ref, watch, defineEmits, onMounted, nextTick } from 'vue';
import { useChat } from '../store/chat'
import { MehOutlined, PictureOutlined, QuestionCircleOutlined } from '@ant-design/icons-vue';

import getData from '../com/com'
import datejs from '../com/date.js'
import { textToImg } from '../com/bioaqing';
import { useHuihua } from '../store/huihua';
import bq from './bq.vue';


const store = useChat();        //会话窗口的聊天数据保存
const hui = useHuihua();        //会话列表的数据
const { fetchChatToId, upFile, upImage, addBlackList, fetchPage } = getData();  // 拿出需要的公共方法
const box = ref(null)           //盒子的ref
const res = defineProps({          //传入的聊天用户id
    id: {
        type: String,
        default: ''
    },
})
const textWb = ref('');  //文本内容
const intImgs = ref(null);  //上传图片标签的ref



const setFile = () => {         
    upFile(store.uid, textWb.value); //上传文本
    textWb.value = ''
}

const setImg = (e) => {                 //上传图片
    let file = WebIM.utils.getFileUrl(intImgs.value);  //根据库的规则来进行文件创建
    upImage(store.uid, file)

}

const upBq = (name) => {        //表情加入到文本
    textWb.value += name;
    console.log(name);
}

const addHei = (id) => {                    //添加到黑名单操作
    addBlackList(id);  //加入黑名单操作
}

const bqShow = ref(false);                  //是否显示表情包的开关


const intoBottom = ref(true);               //是否需要回到顶部的开关
const scrollHanle = (e) => {                //会话进行滚动操作
    if (e.target.scrollTop == 0 && store.Chatinfo.value.isLast == false) {
        intoBottom.value = false;
        scrollWz.value = e.target.scrollHeight;
        fetchPage(res.id, store.Chatinfo.value.cursor)  //当滚到到顶端且数据还可以加载时，继续获取聊天记录
    }
}

const scrollWz = ref(0)                 //记录当前滚动位置 好在添加聊天记录的时候 在原来位置

watch(                          //监听会话发生改变
    () => res.id,
    (newContent, oldContent) => {
        if (newContent) {
            intoBottom.value = true;
            textWb.value = '';
            store.uid = newContent;
            fetchChatToId(newContent);
        }
    }
)



watch(                          //监听数据发生改变来数据的重新渲染和滚动位置的变化
    () => store.Chatinfo.value,
    (n, o) => {
        if (intoBottom.value) {             //当是第一次获取会话
            nextTick(() => {  //下一个周期来进行渲染记录
                setTimeout(() => {
                    box.value.scrollTop = box.value.scrollHeight - box.value.clientHeight;
                }, 500)
            })
        }else{                              //当是翻看历史记录获取会话
            nextTick(()=>{
                box.value.scrollTop =box.value.scrollHeight -  scrollWz.value;
            })
        }
    },
    { deep: true } // 开启深度监听
)


</script>

<style scoped lang="scss">
.chatBox {
    width: 100%;
    height: 100%;
    background-color: #f9f9f9;
    display: flex;
    flex-direction: column;
    border-left: 2px solid #ebebeb;
}

.header {
    height: 10%;
    background-color: #f9f9f9;
    padding: 0 20px;
    box-sizing: border-box;
    font-size: 20px;
    display: flex;
    align-items: center;
    font-weight: 600;
    border-bottom: 2px solid #ebebeb;
    margin-bottom: 20px;
    justify-content: space-between;
}

.contentChat {
    height: 800px;
    overflow-y: scroll;
    -ms-overflow-style: none;
    background-color: #f9f9f9;
    padding: 0 20px;
    box-sizing: border-box;

    .xiaoxi {
        margin-bottom: 20px;
    }

    .dates {
        font-size: 16px;
        color: #b4adb4;
        text-align: center;
        margin-bottom: 15px;
    }

    .con {
        display: flex;

        >img {
            margin-right: 10px;
        }

        .neirong {
            .names {
                color: #9a9aa6;
                font-size: 12px;
                margin-bottom: 3px;
            }

            .neiBox {
                background-color: #ffffff;
                border-radius: 5px;
                padding: 10px 10px 10px 10px;
                box-sizing: border-box;
                font-size: 14px;
                line-height: 20px;
                height: auto;
                color: #606266;
                display: flex;
                align-items: center;
            }
        }
    }

    #yes {
        display: flex;
        flex-direction: row-reverse;
        text-align: right;

        >img {
            margin-left: 10px;
        }
    }
}

.footer {
    flex: 1;
    position: relative;

    >div:first-child {
        position: absolute;
        top: -300px;
        left: 0;
        height: 300px;
        width: 400px;
        border: 1px solid #ebebeb;
        background-color: #f7f7f7;

    }

    .file {
        height: 48px;
        display: flex;
        align-items: center;
        padding-left: 20px;
        box-sizing: border-box;
        background-color: #f7f7f7;
        border-bottom: 2px solid #ebebeb;
        border-top: 2px solid #ebebeb;
        font-size: 25px;

        >span {
            cursor: pointer;
        }
    }

    .content {
        position: relative;
        height: 170px;
        padding-left: 20px;
        padding-top: 10px;
        box-sizing: border-box;

        .btns {
            position: absolute;
            bottom: 20px;
            right: 30px;
        }
    }

}

.contentChat::-webkit-scrollbar {
    width: 0;
    /* 隐藏滚动条在Webkit浏览器中 */
}

img {
    width: 20px;
    height: 20px;
}
</style>